<template>
<div>
    <!-- 消息类型图标 -->
    <div class="message-types">
        <message-type-icon v-for="type in messageTypes" :key="type" :type="type" :unread-count="unreadCounts[type]"
            @click="$emit('type-click', type)" />
    </div>

    <!-- 消息列表 -->
    <div class="message-list">
        <!-- 群聊消息 -->
        <message-item v-for="(item, index) in groupMessages" :key="'group-' + index" :message="item" type="chat"
            @click="$emit('open-chat', item)" @action="$emit('view-chat-detail', item, $event)" />

        <!-- 个人消息 -->
        <message-item v-for="(item, index) in userMessages" :key="'user-' + index" :message="item" type="chat"
            @click="$emit('open-chat', item)" @action="$emit('view-chat-detail', item, $event)" />

        <!-- 空状态 -->
        <empty-state v-if="groupMessages.length === 0 && userMessages.length === 0" type="chat" />
    </div>
</div>
</template>

<script>
import MessageItem from '../MessageItem.vue'
import EmptyState from '../EmptyState.vue'
import MessageTypeIcon from '../MessageTypeIcon.vue'

export default {
    name: 'ChatTab',
    components: {
        MessageItem,
        EmptyState,
        MessageTypeIcon
    },
    props: {
        groupMessages: {
            type: Array,
            default: () => []
        },
        userMessages: {
            type: Array,
            default: () => []
        },
        unreadCounts: {
            type: Object,
            default: () => ({
                likes: 0,
                comments: 0,
                follows: 0,
                system: 0
            })
        }
    },
    data() {
        return {
            messageTypes: ['likes', 'follows', 'comments', 'system']
        }
    }
}
</script>

<style scoped>
.message-types {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    background-color: #fff;
    margin-bottom: 8px;
}

.message-list {
    background-color: #fff;
}
</style>